<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>文章列表</title>
    <link rel="stylesheet" href="js/bootstrap/css/bootstrap.min.css" />
    <link rel="stylesheet" href="css/reset.css" />
    <link rel="stylesheet" href="css/iconfont.css" />
    <link rel="stylesheet" href="css/main.css" />
    <script src="js/jquery-1.12.4.min.js"></script>
    <!-- 导入分页的插件 -->
    <script src="./js/jquery.twbsPagination.min.js"></script>
  </head>

  <body>
    <div class="container-fluid">
      <div class="common_title">
        文章列表
      </div>
      <div class="container-fluid common_con">
        <div class="row opt_btns">
          <div class="col-xs-6">
            <form class="form-inline">
              <select id="selCategory" name="" class="form-control input-sm">
                <option value="">所有分类</option>
              </select>
              <select id="selStatus" name="" class="form-control input-sm">
                <option value="">所有状态</option>
                <option value="草稿">草稿</option>
                <option value="已发布">已发布</option>
              </select>
              <button id="btnSearch" class="btn btn-default btn-sm">
                筛选
              </button>
            </form>
          </div>
          <div class="col-xs-6">
            <a
              href="article_release.html"
              class="btn btn-success btn-sm pull-right"
              id="release_btn"
              >发表文章</a
            >
          </div>
        </div>

        <table class="table table-striped table-bordered table-hover mp20">
          <thead>
            <tr>
              <th>标题</th>
              <th>作者</th>
              <th>分类</th>
              <th class="text-center">发表时间</th>
              <th class="text-center">状态</th>
              <th class="text-center" width="100">操作</th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <td>王积千造统最头</td>
              <td>杰克</td>
              <td>奇趣事</td>
              <td class="text-center">2017-06-08 07:08:46</td>

              <td class="text-center">已发布</td>

              <td class="text-center">
                <a href="article_edit.html" class="btn btn-default btn-xs"
                  >编辑</a
                >
                <a
                  href="javascript:deleteTr( 1005 );"
                  class="btn btn-danger btn-xs"
                  >删除</a
                >
              </td>
            </tr>

            <tr>
              <td>级电使正回</td>
              <td>肉丝</td>
              <td>爱旅行</td>
              <td class="text-center">2017-06-06 10:45:24</td>

              <td class="text-center">已发布</td>

              <td class="text-center">
                <a href="article_edit.html" class="btn btn-default btn-xs"
                  >编辑</a
                >
                <a
                  href="javascript:deleteTr( 1004 );"
                  class="btn btn-danger btn-xs"
                  >删除</a
                >
              </td>
            </tr>

            <tr>
              <td>近难领管年算</td>
              <td>杰克</td>
              <td>会生活</td>
              <td class="text-center">2017-05-27 16:49:04</td>

              <td class="text-center">已发布</td>

              <td class="text-center">
                <a href="article_edit.html" class="btn btn-default btn-xs"
                  >编辑</a
                >
                <a
                  href="javascript:deleteTr( 1003 );"
                  class="btn btn-danger btn-xs"
                  >删除</a
                >
              </td>
            </tr>

            <tr>
              <td>龙大实究</td>
              <td>杰克</td>
              <td>未分类</td>
              <td class="text-center">2017-04-13 10:43:41</td>

              <td class="text-center">草稿</td>

              <td class="text-center">
                <a href="post-edit.html?id=1002" class="btn btn-default btn-xs"
                  >编辑</a
                >
                <a
                  href="javascript:deleteTr( 1002 );"
                  class="btn btn-danger btn-xs"
                  >删除</a
                >
              </td>
            </tr>

            <tr>
              <td>算性得走来拉</td>
              <td>肉丝</td>
              <td>奇趣事</td>
              <td class="text-center">2017-04-06 04:58:12</td>

              <td class="text-center">已发布</td>

              <td class="text-center">
                <a href="post-edit.html?id=1001" class="btn btn-default btn-xs"
                  >编辑</a
                >
                <a
                  href="javascript:deleteTr( 1001 );"
                  class="btn btn-danger btn-xs"
                  >删除</a
                >
              </td>
            </tr>

            <tr>
              <td>几平会出气</td>
              <td>管理员</td>
              <td>奇趣事</td>
              <td class="text-center">2017-04-03 20:16:34</td>

              <td class="text-center">草稿</td>

              <td class="text-center">
                <a href="post-edit.html?id=1000" class="btn btn-default btn-xs"
                  >编辑</a
                >
                <a
                  href="javascript:deleteTr( 1000 );"
                  class="btn btn-danger btn-xs"
                  >删除</a
                >
              </td>
            </tr>

            <tr>
              <td>世团先证型角</td>
              <td>杰克</td>
              <td>奇趣事</td>
              <td class="text-center">2017-04-03 14:40:08</td>

              <td class="text-center">已发布</td>

              <td class="text-center">
                <a href="post-edit.html?id=999" class="btn btn-default btn-xs"
                  >编辑</a
                >
                <a
                  href="javascript:deleteTr( 999 );"
                  class="btn btn-danger btn-xs"
                  >删除</a
                >
              </td>
            </tr>

            <tr>
              <td>构更反步五</td>
              <td>肉丝</td>
              <td>奇趣事</td>
              <td class="text-center">2017-03-30 22:31:52</td>

              <td class="text-center">已发布</td>

              <td class="text-center">
                <a href="post-edit.html?id=998" class="btn btn-default btn-xs"
                  >编辑</a
                >
                <a
                  href="javascript:deleteTr( 998 );"
                  class="btn btn-danger btn-xs"
                  >删除</a
                >
              </td>
            </tr>

            <tr>
              <td>组方些</td>
              <td>肉丝</td>
              <td>会生活</td>
              <td class="text-center">2017-02-08 05:38:43</td>

              <td class="text-center">草稿</td>

              <td class="text-center">
                <a href="post-edit.html?id=996" class="btn btn-default btn-xs"
                  >编辑</a
                >
                <a
                  href="javascript:deleteTr( 996 );"
                  class="btn btn-danger btn-xs"
                  >删除</a
                >
              </td>
            </tr>

            <tr>
              <td>日做发光成</td>
              <td>管理员</td>
              <td>爱旅行</td>
              <td class="text-center">2017-01-26 22:19:59</td>

              <td class="text-center">草稿</td>

              <td class="text-center">
                <a href="post-edit.html?id=995" class="btn btn-default btn-xs"
                  >编辑</a
                >
                <a
                  href="javascript:deleteTr( 995 );"
                  class="btn btn-danger btn-xs"
                  >删除</a
                >
              </td>
            </tr>
          </tbody>
        </table>

        <div class="row text-center">
          <ul class="pagination pagination-sm">
            <li class="page-item first disabled">
              <a href="#" class="page-link">首页</a>
            </li>
            <li class="page-item prev disabled">
              <a href="#" class="page-link">上一页</a>
            </li>
            <li class="page-item active">
              <a href="#" class="page-link">1</a>
            </li>
            <li class="page-item"><a href="#" class="page-link">2</a></li>
            <li class="page-item"><a href="#" class="page-link">3</a></li>
            <li class="page-item"><a href="#" class="page-link">4</a></li>
            <li class="page-item"><a href="#" class="page-link">5</a></li>
            <li class="page-item"><a href="#" class="page-link">6</a></li>
            <li class="page-item"><a href="#" class="page-link">7</a></li>
            <li class="page-item next">
              <a href="#" class="page-link">下一页</a>
            </li>
            <li class="page-item last">
              <a href="#" class="page-link">尾页</a>
            </li>
          </ul>
        </div>
      </div>
    </div>

    <script>
      // 设置左侧菜单
      $('#release_btn').click(function() {
        window.parent.setMenu(1, 1)
      })
    </script>
    <!-- 模板引擎导入 -->
    <script src="./js/template-web.js"></script>
    <!-- 定义模板 选项 -->
    <script type="text/html" id="cate">
      {{each data v}}
          <option value="{{v.id}}">{{v.name}}</option>
      {{/each}}
    </script>
    <!-- 定义模板 文章 -->
    <script type="text/html" id="article">
      {{each data v}}
          <tr>

                <td>{{v.title}}</td>
                <td>{{v.author}}</td>
                <td>{{v.type}}</td>
                <td class="text-center">{{v.date}}</td>


                <td class="text-center">{{v.state}}</td>


                <td class="text-center">
                    <a href="article_edit.html" class="btn btn-default btn-xs">编辑</a>
                    <a href="javascript:deleteTr( 1005 );" class="btn btn-danger btn-xs">删除</a>
                </td>
            </tr>
        {{/each}}
    </script>
    <!-- 自己的js -->
    <script>
      /*
            文章类表-分类获取
                请求地址：http://localhost:8000/admin/category_search
                请求方式：get
                请求参数：无
                步骤
                1. 打开文章列表页
                2. 调用文章分类数据接口 获取所有的分类
                3. 获取到之后设置到页面左上角的 下拉框中

            文章列表- 分页数据获取
                请求地址：http://localhost:8000/admin/search
                    请求方式：get
                    请求参数：page,perpage
                    步骤
                    1. 进入文章列表页之后，通过ajax获取分页文章数据
                    2. page&perpage 第一页，每页6条
                    3. 数据回来之后渲染到页面上 模板引擎


        */
      $(function() {
        // 页码
        var myPage = 1
        // 总页数
        var myTotalPage = 10

        // 根据分页插件的示例修改分页插件的使用
        var $pagination = $('.pagination')
        var defaultOpts = {
          totalPages: myTotalPage,
          visiblePages: 7,
          first: '最那边',
          last: '最外头',
          prev: '上一页',
          next: '下一页',
          onPageClick: function(event, page) {
            // 事件参数
            // console.log(event)
            // 页码
            // console.log(page)
            myPage = page
            // 重新调用获取文章数据的方法
            getArticles()
          }
        }
        $pagination.twbsPagination(defaultOpts)

        // 获取文章数据的方法
        function getArticles() {
          $.ajax({
            url: 'http://localhost:8000/admin/search',
            data: {
              page: myPage,
              perpage: 6,
              // 文章的分类id
              type: $('#selCategory').val(),
              // 状态
              state: $('#selStatus').val()
            },
            success: function(backData) {
              console.log(backData)
              // 方法
              var html = template('article', backData)
              // tbody中
              $('tbody').html(html)
              // 重置页码
              var totalPages = backData.totalPage
              if (myTotalPage != totalPages) {
                // 总页数变了
                myTotalPage = totalPages
                // 写死为第一页即可
                $pagination.twbsPagination('destroy')
                $pagination.twbsPagination(
                  $.extend({}, defaultOpts, {
                    startPage: 1,
                    totalPages: totalPages
                  })
                )
              }
            }
          })
        }

        // 获取分类数据
        $.ajax({
          url: 'http://localhost:8000/admin/category_search',
          // type:"get",// get可以省略 默认就是get
          success: function(backData) {
            // console.log(backData);
            var html = template('cate', backData)
            // 添加到select中
            $('#selCategory').append(html)
          }
        })

        // 获取文章数据
        getArticles()

        // 点击筛选
        $('#btnSearch').click(function(e) {
          e.preventDefault()
          // 调用获取文章的方法
          getArticles()
        })
      })
    </script>
  </body>
</html>
